<template>
  <div class="app-container">
    <el-form :inline="true" :model="form" class="demo-form-inline filter-container">
      <el-form-item prop="dateType" label="日期：">
        <el-date-picker
          v-model="form.month"
          unlink-panels
          type="month"
          align="right"
          value-format="yyyy-MM">
        </el-date-picker>
      </el-form-item>
      <el-form-item v-if="roleCheck('virtual')" class="with-pre-select" label="数据类型">
        <el-select v-model="form.isFake">
          <el-option v-for="item in consts.STATISTICS_RANGE"
                     :key="item.value"
                     :label="item.title"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-button type="primary" v-waves icon="el-icon-search" @click="submitFilterForm">搜索</el-button>
    </el-form>

    <el-table :data="tableData"
              v-loading="loading" element-loading-text="给我一点时间" border fit
              highlight-current-row
              style="width: 100%">
      <el-table-column label="日期" align="center" prop="createTime">
        <template slot-scope="{row}">
          {{row.date}}
        </template>
      </el-table-column>
      <el-table-column label="授权上分总额度" align="center" prop="amount">
        <template slot-scope="{row}">
          {{row.creditAmount | currency}}
        </template>
      </el-table-column>
      <el-table-column label="会员上分" align="center" prop="amount">
        <template slot-scope="{row}">
          {{row.usedAmount | currency}}
        </template>
      </el-table-column>
      <el-table-column label="已清算上分总额度" align="center">
          <el-table-column
            label="账户余额清算"
            align="center"
          >
            <template slot-scope="{row}">
              {{row.deductionAmount | currency}}
            </template>
          </el-table-column>
          <el-table-column
            label="人工操作清算"
            align="center"
          >
            <template slot-scope="{row}">
              {{row.settleAmount | currency}}
            </template>
          </el-table-column>
      </el-table-column>

<!--      <el-table-column label="已清算上分总额度" align="center" prop="amount">-->
<!--        <template slot-scope="{row}">-->
<!--          {{row.settleAmount | currency}}-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="代理上分" align="center" prop="amount">
        <template slot-scope="{row}">
          {{row.grantAmount | currency}}
        </template>
      </el-table-column>
      <el-table-column label="剩余授权上分总额度" align="center" prop="amount">
        <template slot-scope="{row}">
          {{row.restAmount | currency}}
        </template>
      </el-table-column>
      <el-table-column label="更多数据" align="center" prop="proxy">
        <template slot-scope="{row}">
          <el-tag
            class="pointer"
            @click.native="openDialog({props:row, dialogName: 'custom-dialog'})"
          >更多数据</el-tag>
        </template>
      </el-table-column>
    </el-table>

    <!--<div class="pagination-container">-->
      <!--<el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"-->
                     <!--:current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"-->
                     <!--:layout="gridLayout" :total="tableData.total">-->
      <!--</el-pagination>-->
    <!--</div>-->
    <custom-dialog :visible="dialogVisible" returnButtonName="返回" :callback="closeDialog">
      <div slot="title">&nbsp;</div>
      <sub-list v-if="dialogVisible" :row-data="dialogProps" :month="form.month"></sub-list>
    </custom-dialog>
  </div>
</template>

<script>
  import {form, grid, dialog} from '@/build';

  import SubList from "./subList";
  import {
    upAmountList as listApi,
  } from '@/services/api/report';

  export default {
    name: 'report-credit',

    mixins: [form, grid, dialog],
    components:{
      SubList
    },
    data() {
      return {
        tableData: [],
        form: {
          month: moment().format('YYYY-MM'),
          isFake: 0,
        },
        filterDateType: false,
      }
    },
    methods: {
      submitFilterForm() {
        this.filters = {...this.form}
        this.getAll()
      },
    },

    mounted() {
      this.bindGet(listApi, 'tableData', {
        sendingData: 'form',
        action: "getGrid",
        format: data => {
          if(!data) return null;
          let result = [];
          _.forIn(data, (value, key) => {
            result.push({...value, date: key});
          });
          const sortData = _.sortBy(result, item => {
            return -new Date(item.date).getTime();
          });
          return sortData;
        }
      });
      this.getAll();
    }
  }
</script>
